import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Form,
  Icon,
  AutoComplete,
  DatePicker,
  Input,
  Button,
  Select,
  Alert,
  Row,
  Col,
  Tabs,
} from 'antd';
import { connect } from 'dva';
import { soldSearch, commodityQuery } from '@/services/user';
import styles from './styles.less';
const { TextArea } = Input;
const { Option } = Select;
const { TabPane } = Tabs;

class Sold extends React.Component<any, any> {
  unitCN = {
    bottle: '瓶',
    box: '箱',
  };

  state = {
    unit: 'bottle',
    scale: '4',
    personData: [],
    commodityData: [],
  };
  handleSelect = (value: any) => {
    this.setState({
      unit: value,
    });
  };
  handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const { unit } = this.state;
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.props.dispatch({
          type: 'buy/submit',
          payload: {
            type: 1,
            ...values,
            dealTime: new Date(values.dealTime).getTime(),
            quantityComments: this.unitCN[unit],
            companyPrice: Number(values.companyPrice),
            companyProfitProportion: Number(values.companyProfitProportion),
            companySalePrice: Number(values.companySalePrice),
            freight: Number(values.freight),
            quantity: Number(values.quantity),
            staffId: Number(values.staffId),
            staffPrice: Number(values.staffPrice),
            wineId: Number(values.wineId),
          },
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { unit, personData, commodityData } = this.state;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    const selectAfter = (
      <Select defaultValue={unit} onChange={this.handleSelect} style={{ width: 55 }}>
        <Option value="bottle">瓶</Option>
        <Option value="box">斤</Option>
      </Select>
    );
    const Desc = (
      <div style={{ fontSize: '14px' }}>
        <span style={{ color: 'red' }}>*售出时利润计算公式:</span>
        <p>(公司核定销售价-公司核定买入价)× 数量 × 利润分成比</p>
        <span style={{ color: 'red' }}>*利润分成比:</span>
        <p>例， 4:6 是指个人利润占总利润的40%，公司利润占总利润的60% </p>
      </div>
    );
    const dataSource = ['张三', '李四', '赵起t'];
    return (
      <PageHeaderWrapper>
        <div className={styles.soldcontain}>
          {/* <Tabs defaultActiveKey="1" onChange={() => {}}> */}
          {/* <TabPane tab="方案一" key="1"> */}
          {/* <Row>
                <Col span={14}>
                  <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                    <Form.Item label={'公司核定价'}>
                      {getFieldDecorator('username', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                      })(<Input prefix="￥" suffix="RMB" />)}
                    </Form.Item>
                    <Form.Item label={'公司核定销售价'}>
                      {getFieldDecorator('username', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                      })(<Input prefix="￥" suffix="RMB" />)}
                    </Form.Item>
                    <Form.Item label={'物品购入价'}>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                      })(<Input prefix="￥" suffix="RMB" />)}
                    </Form.Item>
                    <Form.Item label={'购入数量'}>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                      })(<Input placeholder="请输入数量" />)}
                    </Form.Item>
                    <Form.Item label={'售出数量'}>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                      })(<Input placeholder="请输入数量" />)}
                    </Form.Item>
                    <Form.Item label={'买入时其余费用'}>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                      })(<Input prefix="￥" suffix="RMB" />)}
                    </Form.Item>
                    <Form.Item label={'售出时其余费用'}>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                      })(<Input prefix="￥" suffix="RMB" />)}
                    </Form.Item>
                    <Form.Item label={'利润分成比'}>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                      })(
                        <Select>
                          <Option value="jack">Jack</Option>
                          <Option value="lucy">Lucy</Option>
                          <Option value="tom">Tom</Option>
                        </Select>,
                      )}
                    </Form.Item>
                    <Form.Item label={'备注'}>
                      {getFieldDecorator('password', {
                        rules: [{ message: 'Please input your Password!' }],
                      })(<TextArea rows={4} />)}
                    </Form.Item>
                    <div>
                      <Button
                        type="primary"
                        size="large"
                        htmlType="submit"
                        style={{ margin: '0 60px 0 120px' }}
                      >
                        提交
                      </Button>
                      <Button type="ghost" size="large" htmlType="submit">
                        取消
                      </Button>
                    </div>
                  </Form>
                </Col>
                <Col span={8}>
                  <Alert
                    message={
                      <span style={{ color: 'red', fontSize: '14px' }}>*售出时利润计算公式</span>
                    }
                    description="（（公司核定买入价-购买人买入价）*数量 -买入时的车油费 ）/2 + （（公司核定销售价-公司核定买入价）*售出数量 -卖出时的车油费 ）/2"
                    type="info"
                  />
                </Col>
              </Row> */}
          {/* </TabPane> */}
          {/* <TabPane tab="方案二" key="2"> */}
          <Row>
            <Col span={14}>
              <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label={'人员'}>
                  {getFieldDecorator('staffId', {
                    rules: [{ required: true, message: '请输入工作人员' }],
                  })(
                    <Select
                      showSearch
                      // value={value}
                      placeholder="请输入工作人员"
                      // notFoundContent={fetching ? <Spin size="small" /> : null}
                      filterOption={false}
                      onFocus={() => {
                        soldSearch({ comments: '' }).then(res => {
                          if (res.status == 200) {
                            this.setState({
                              personData: res.data,
                            });
                          } else {
                            this.setState({
                              personData: [],
                            });
                          }
                        });
                      }}
                      onSearch={value => {
                        soldSearch({ comments: value }).then(res => {
                          if (res.status == 200) {
                            this.setState({
                              personData: res.data,
                            });
                          } else {
                            this.setState({
                              personData: [],
                            });
                          }
                        });
                      }}
                      onChange={() => {}}
                    >
                      {personData.length > 0
                        ? personData.map((item: any, index) => (
                            <Option key={item.id}>
                              {item.name} （{item.phoneNumber}）
                            </Option>
                          ))
                        : null}
                    </Select>,
                  )}
                </Form.Item>
                <Form.Item label={'商品名'}>
                  {getFieldDecorator('wineId', {
                    rules: [{ required: true, message: '请输入商品' }],
                  })(
                    <Select
                      showSearch
                      // value={value}
                      placeholder="请输入商品"
                      // notFoundContent={fetching ? <Spin size="small" /> : null}
                      filterOption={false}
                      onFocus={() => {
                        commodityQuery({ comments: '' }).then(res => {
                          if (res.status == 200) {
                            this.setState({
                              commodityData: res.data,
                            });
                          } else {
                            this.setState({
                              commodityData: [],
                            });
                          }
                        });
                      }}
                      onSearch={value => {
                        commodityQuery({ comments: value }).then(res => {
                          if (res.status == 200) {
                            this.setState({
                              commodityData: res.data,
                            });
                          } else {
                            this.setState({
                              commodityData: [],
                            });
                          }
                        });
                      }}
                      onChange={() => {}}
                    >
                      {commodityData.length > 0
                        ? commodityData.map((item: any, index) => (
                            <Option key={item.id}>
                              {item.name}（{item.comments}）
                            </Option>
                          ))
                        : null}
                    </Select>,
                  )}
                </Form.Item>
                <Form.Item label={'公司核定买入价'}>
                  {getFieldDecorator('companyPrice', {
                    rules: [
                      {
                        required: true,
                        pattern: /^[1-9]\d*$/,
                        message: '请输入正确的商品核定买入价',
                      },
                    ],
                  })(<Input prefix="￥" suffix="RMB" placeholder="请输入正确的商品核定买入价" />)}
                </Form.Item>
                <Form.Item label={'公司核定销售价'}>
                  {getFieldDecorator('companySalePrice', {
                    rules: [
                      {
                        required: true,
                        pattern: /^[1-9]\d*$/,
                        message: '请输入正确的公司核定销售价',
                      },
                    ],
                  })(<Input prefix="￥" suffix="RMB" placeholder="请输入正确的公司核定销售价" />)}
                </Form.Item>
                <Form.Item label={'售出数量'}>
                  {getFieldDecorator('quantity', {
                    rules: [{ required: true, pattern: /^[1-9]\d*$/, message: '请输入正确的数量' }],
                  })(<Input placeholder="请输入数量" addonAfter={selectAfter} />)}
                </Form.Item>
                <Form.Item label={'运费'}>
                  {getFieldDecorator('freight', {
                    rules: [{ pattern: /^[1-9]\d*$/, message: '请输入正确的运费' }],
                  })(<Input prefix="￥" suffix="RMB" placeholder="请输入运费" />)}
                </Form.Item>
                <Form.Item label={'其它费用'}>
                  {getFieldDecorator('otherFee', {
                    rules: [{ pattern: /^[1-9]\d*$/, message: '请输入正确的费用' }],
                  })(<Input prefix="￥" suffix="RMB" placeholder="请输入其它费用" />)}
                </Form.Item>
                <Form.Item label={'其它费用备注'}>
                  {getFieldDecorator('otherFeeComments')(
                    <TextArea rows={2} placeholder="请输入其它费用备注" />,
                  )}
                </Form.Item>
                <Form.Item label={'利润分成比'}>
                  {getFieldDecorator('companyProfitProportion', {
                    initialValue: '0.4',
                    rules: [{ required: true }],
                  })(
                    <Select>
                      <Option value="0.4">4:6</Option>
                      <Option value="0.5">5:5</Option>
                      <Option value="0.6">6:4</Option>
                    </Select>,
                  )}
                </Form.Item>
                <Form.Item label={'成交时间'}>
                  {getFieldDecorator('dealTime', {
                    rules: [{ required: true, message: '请选择成交时间' }],
                  })(<DatePicker onChange={() => {}} />)}
                </Form.Item>
                <Form.Item label={'备注'}>
                  {getFieldDecorator('comments')(<TextArea rows={4} />)}
                </Form.Item>
                <div>
                  <Button
                    type="primary"
                    size="large"
                    htmlType="submit"
                    style={{ margin: '0 60px 0 120px' }}
                  >
                    提交
                  </Button>
                  <Button type="ghost" size="large" htmlType="submit">
                    取消
                  </Button>
                </div>
              </Form>
            </Col>
            <Col span={8}>
              <Alert
                message={
                  <p style={{ color: '#1890FF', fontWeight: 'bold', marginBottom: '10px' }}>
                    备注说明
                  </p>
                }
                description={Desc}
                type="info"
              />
            </Col>
          </Row>
          {/* </TabPane> */}
          {/* </Tabs> */}
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default connect(() => ({}))(Form.create()(Sold));
